<template>
    <h2 style="text-align: center;">网格人员管理</h2>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">基础数据</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>网格人员</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 表单查询部分 -->
    <div style="border: 1px solid #ccc; margin: 10px 3px; padding: 20px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="所属部门">
                <el-cascader v-model="formInline.Depart_Id" :options="DepartInfo" @change="SelectTreeChanger" :props="props1"clearable />
            </el-form-item>

            <el-form-item label="真实姓名">
                <el-input v-model="formInline.Acoount_RealName" placeholder="请输入真实姓名" clearable />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="ShowGrid">查询</el-button>
                <el-button type="danger" @click="Reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 数据显示部分 -->
    <div style="border: 1px solid #ccc; margin: 10px 3px; padding: 20px;">
        <el-button  type="success" size="small" @click="dialogVisible=true">新增+</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="100" />
            <el-table-column prop="Id" label="编号" width="150" />
            <el-table-column prop="Accoun_Name" label="账号" width="120" />
            <el-table-column prop="Accoun_Phone" label="联系方式" width="120" />
            <el-table-column prop="Accoun_CodeId" label="身份证号" width="200" />
            <el-table-column prop="Accoun_RealName" label="真实姓名" width="120" />
            <el-table-column prop="Depart_Name" label="部门名称" width="120" />
            <el-table-column prop="Role_Name" label="角色" width="120" />
            <el-table-column fixed="right" label="Operations" min-width="120">
            <template #default="setup">
                <el-button  type="danger" size="small" @click="DelGridPerson(setup.row.Id)">删除</el-button>
                <el-button  type="primary" size="small">编辑</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 分页部分 -->
    <table>
        <tr>
            <td>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="PageInfo.index" v-model:page-size="PageInfo.size"
                        :page-sizes="[2, 3, 4, 5]" :size="PageInfo.size" :disabled="disabled" :background="background"
                        layout=" sizes,slot" :total="PageInfo.zongtiao" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                        数据共<span style="color: red;">{{ PageInfo.zongtiao }}</span>条,
                        每页<span style="color: red;">{{ PageInfo.size }}</span>条
                        共<span style="color: red;">{{ PageInfo.index }}</span>/
                        <span style="color: red;">{{ PageInfo.zongpage }}</span>页
                    </el-pagination>
                </div>
            </td>
            <td>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="PageInfo.index" v-model:page-size="PageInfo.size"
                        :page-sizes="[2, 3, 4, 5]" :size="PageInfo.size" :disabled="disabled" :background="background"
                        layout="slot,prev,pager,next" :total="PageInfo.zongtiao" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
                        <el-button type="primary" size="small" link @click="handleCurrentChange(1)">首页</el-button>
                    </el-pagination>
                </div>
            </td>
            <td>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="PageInfo.index" v-model:page-size="PageInfo.size"
                        :page-sizes="[2, 3, 4, 5]" :size="PageInfo.size" :disabled="disabled" :background="background"
                        layout="slot,jumper" :total="PageInfo.zongtiao" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
                        <el-button type="primary" size="small" link
                            @click="handleCurrentChange(PageInfo.zongpage)">尾页</el-button>
                    </el-pagination>
                </div>
            </td>
        </tr>
    </table>

    <!-- 弹出窗 -->
    <el-dialog
        v-model="dialogVisible"
        title="新增网格员"
        width="500"
    >
        <el-form
            ref="ruleFormRef"
            style="max-width: 600px" 
            :model="AddInfo"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
        >
            <el-form-item label="部门名称">
                <el-cascader v-model="AddInfo.Depart_Id" :options="DepartInfo" @change="TreeChanger" :props="props1"clearable />
            </el-form-item>

            <el-form-item label="真实姓名" prop="Accoun_RealName">
                <el-input v-model="AddInfo.Accoun_RealName" placeholder="请输入真实姓名"/>
            </el-form-item>

            <el-form-item label="身份证号" prop="Accoun_CodeId">
                <el-input v-model="AddInfo.Accoun_CodeId" placeholder="请输入身份证号"/>
            </el-form-item>

            <el-form-item label="联系方式" prop="Accoun_Phone">
                <el-input v-model="AddInfo.Accoun_Phone" @blur="AddInfo.Accoun_Name==AddInfo.Accoun_Phone" placeholder="请输入联系方式"/>
            </el-form-item>

            <el-form-item label="账号" prop="Accoun_Name">
                <el-input v-model="AddInfo.Accoun_Name" placeholder="默认手机号" />
            </el-form-item>
        
            <el-form-item label="角色">
                <el-radio-group v-model="AddInfo.Role_Id">
                    <el-radio :value="2">网格长</el-radio>
                    <el-radio :value="3">网格员</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    
</template>


<script setup lang="ts">
    import {ref,reactive,onMounted} from 'vue';
    import axios from 'axios';
    import {  type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
    import { ElMessage, ElMessageBox } from 'element-plus'
    //分页响应式数据
    const PageInfo=ref({
        index:1,
        size:3,
        zongtiao:0,
        zongpage:0
    })
    const background = ref(true)
    const disabled = ref(false)

    //修改页容量
    const handleSizeChange = (val: number) => {
        PageInfo.value.size = val;
        ShowGrid();
    }
    //跳转页
    const handleCurrentChange = (val: number) => {
        PageInfo.value.index = val;
        ShowGrid();
    }
    //显示响应式数据
    const tableData=ref([])
    //钩子函数
    onMounted(()=>{
        ShowGrid();
        GetDepartmentTree();//级联
    })
    //查询条件
    const formInline = reactive({
        Depart_Id:-1,
        Acoount_RealName: '',
    })
    const SelectTreeChanger=(value:any)=>{
        formInline.Depart_Id=value[value.length-1];
    }
    //显示
    const ShowGrid = () => {
        axios.get("http://localhost:5192/api/GridPerson/ShowGrid",
            {
                params:{
                    Depart_Id:formInline.Depart_Id,
                    Acoount_RealName:formInline.Acoount_RealName,
                    index:PageInfo.value.index,
                    size:PageInfo.value.size,
                }
            }
        )
        .then(res=>{
            tableData.value=res.data.Plist;
            PageInfo.value.zongpage=res.data.ZongPgae;
            PageInfo.value.zongtiao=res.data.ZongTiao
        })
    }
    //重置
    const Reset=()=>{
        formInline.Depart_Id=-1;
        formInline.Acoount_RealName="";
    }

    //逻辑删除
    const DelInfo=ref({
        CreateName:"",
    })
    const DelGridPerson = (Id:string) => {
        ElMessageBox.confirm(
            '确定删除?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        .then(() => {
            axios.put("http://localhost:5019/api/Account/DelAccount",
                {
                    Id:Id,
                    CreateNam:DelInfo.value.CreateName,
                }
            )
            .then(res=>{
                if(res.data.Code==200)
                {
                    ElMessage.success(res.data.Message);
                    ShowGrid();
                }
                else
                {
                    ElMessage.error(res.data.Message)
                }
            })
        })
    }

    //---------------------------------------------弹出窗--------------------------------------------//

    const dialogVisible=ref(false);

    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    const AddInfo = ref({
        Accoun_Name: "",
        Accoun_Password: "",
        Accoun_Phone: "",
        Accoun_CodeId: "",
        Accoun_RealName: "",
        Depart_Id: 0,
        Role_Id: 2,
        CreateName: localStorage.getItem("Accoun_Name") || "",
    })

    const locationOptions = ['Home', 'Company', 'School']

    //验证
    const rules = reactive<FormRules>({
        Accoun_Name: [
            { required: true, message: '账号不能为空！', trigger: 'blur' },
        ],
        Accoun_Phone: [
            { required: true, message: '联系方式不能为空！', trigger: 'blur' },
            { pattern: /^1[3-9]\d{9}/, message: "手机号格式不正确！", trigger: 'blur' }
        ],
        Accoun_CodeId: [
            { required: true, message: '身份证号不能为空！', trigger: 'blur' },
        ],
        Accoun_RealName: [
            { required: true, message: '姓名不能为空！', trigger: 'blur' },
        ],
    })
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                axios.post("http://localhost:5019/api/Account/AddAccount", AddInfo.value)
                    .then(res => {
                        if (res.data.Code == 200) {
                            ElMessage.success(res.data.Message);
                            ShowGrid();//跳转到显示列表
                            //添加成后关闭窗口
                            dialogVisible.value = false;
                            //清空表单数据
                            AddInfo.value.Depart_Id = 0;
                            AddInfo.value.Accoun_Name = "";
                            AddInfo.value.Accoun_Phone = "";
                            AddInfo.value.Accoun_CodeId = "";
                            AddInfo.value.Accoun_RealName = "";
                        }
                        else {
                            ElMessage.error(res.data.Message)
                        }
                    })
            } else {
            console.log('error submit!', fields)
            }
        })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

    const options = Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
    }))

    //--------------------------------------------级联选择器---------------------------------------//

    const props1 = {
        checkStrictly: true,//选择任意一级
        value: 'Id',
        label: 'Depart_Name',
        children: 'Children'
    }
    //级联响应式数据
    const DepartInfo = ref([])
    //获取数据
    const GetDepartmentTree = () => {
        axios.get("http://localhost:5192/api/Department/GetDepartmentTree")
            .then(res => {
                DepartInfo.value = res.data.Data
            })
    }
    //获取部门值
    const TreeChanger = (value: any) => {
        AddInfo.value.Depart_Id = value[value.length - 1];
    }

</script>



<style>
    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }
    .demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
    }

    .demo-pagination-block .demonstration {
        margin-bottom: 16px;
    }
</style>